import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid } from '@icedesign/base';

const { Row, Col } = Grid;

export default class GeneralWidget extends Component {
  static displayName = 'GeneralWidget';

  render() {
    return (
      <IceContainer title="What We Provide">
       
        <Row wrap>
          <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image1.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Batch Process
                    <p>List products, manage orders, shipnotices and invoices in a batch manner</p>
              </span>
            </a>
          </Col>
          <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image2.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Report Center
                    <p>Better insight of business data from various aspects, enchance operation and increase sales</p>
              </span>
            </a>
          </Col>
          <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image3.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Content Management
                   <p>Get feedback from customer directly and reply questions on the fly</p>
              </span>
            </a>
          </Col>
        </Row>
      <Row>  
        <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image4.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Order Management
                  <p>Rich and convenient user interface of order, shipnotice and invoice manipulation</p>
              </span>
            </a>
          </Col>
          <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image5.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Contract Management
                   <p>Centralized contract review and e-signature templates</p>
              </span>
            </a>
          </Col>
          <Col l="8" xxs="12" style={styles.widgetItem}>
            <a style={styles.widgetLink}>
              <img
                src={require('./images/image6.png')}
                alt=""
                style={styles.widgetImg}
              />
              <span style={styles.widgetName}>Access Anywhere
                   <p>Consistent user experence no matter where the entry point is, e.g. mobile, laptop, tablet and etc.</p>
              </span>
            </a>
          </Col>
       </Row>
      </IceContainer>
    );
  }
}

const styles = {
  widgetItem: {
    margin: '12px 0',
  },
  widgetLink: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    color: '#666',
    marginLeft: '20px',
  },
  widgetImg: {
    width: '50px',
    height: '50px',
  },
  widgetName: {
    marginLeft: '10px',
    fontSize: '20px',
    lineheight: '27px',
  },
};
